<template>
  <!-- mv模块 -->
  <div class="mod-my-mv">
    <div class="container" v-if="code == 200">
      <div class="my-mv-main">
        <div class="my-mv-box">
          <div class="my-mv-hd">
            <h1 class="my-mv-title">
              {{ mvDetail.name }}
            </h1>
            <h4 class="my-mv-artist">
              <a
                v-for="(artist, n) in mvDetail.artists"
                :key="n"
                href="javascript:;"
                :title="artist.name"
                @click="clickArtistDetail(artist.id)"
              >
                <i v-if="n > 0"> / </i>
                {{ artist.name }}
              </a>
            </h4>
          </div>
          <!-- <video
            class="my-mv-video"
            :src="mvUrl"
            controls
            preload="auto"
          ></video> -->
          <video-box
            :url="mvUrl"
            :brs="brs"
            :r="r"
            @boxChangeBr="getMvUrl"
          ></video-box>
          <!-- :key="r" -->
          <div class="my-mv-toolbar">
            <a class="mod-btn" title="点赞">
              <i class="iconfont">&#xe8b0;</i>
              ({{ likedCount }})
            </a>
            <a class="mod-btn" title="收藏">
              <i class="iconfont">&#xe8c8;</i>
              ({{ mvDetail.subCount }})
            </a>
            <a class="mod-btn" title="分享">
              <i class="iconfont">&#xe8af;</i>
              ({{ mvDetail.shareCount }})
            </a>
          </div>
        </div>
        <div class="my-mv-comment" v-if="commentData">
          <comment ref="comment" :commentData="commentData"></comment>
          <div class="comment-el-pagination" v-if="commentData.total > 20">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="20"
              layout="prev, pager, next, jumper"
              :total="commentData.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="my-mv-relative">
        <div class="my-mv-relative-box">
          <h2 class="my-mv-relative-hd">MV简介</h2>
          <div class="mv-publish">发布时间：{{ mvDetail.publishTime }}</div>
          <div class="mv-playCount">
            播放次数：{{ mvDetail.playCount | showCount }}
          </div>
          <div class="mv-desc">
            <pre>{{ mvDetail.briefDesc }}</pre>
            <pre>{{ mvDetail.desc }}</pre>
          </div>
        </div>
        <div class="my-mv-relative-box" v-if="videoRelative.length > 0">
          <h2 class="my-mv-relative-hd">相关推荐</h2>
          <video-list
            :item="item"
            v-for="item in videoRelative"
            :key="item.vid"
          ></video-list>
        </div>
      </div>
    </div>
    <no-resource v-if="code == 404"></no-resource>
  </div>
</template>

<script>
import Comment from "views/toplists/child/Comment.vue";
import VideoList from "components/videolist/VideoList.vue";
import VideoBox from "components/videobox/VideoBox.vue";
import { shortCount } from "common/count";
import NoResource from "views/notfound/NoResource";

export default {
  components: {
    Comment,
    VideoList,
    VideoBox,
    NoResource,
  },
  data() {
    return {
      id: "",
      mvDetail: {},
      mvUrl: "",
      brs: [],
      r: 1080,
      videoRelative: [],
      likedCount: "",
      commentData: {},
      currentPage: 1,
      // 分辨率数据
      code: 200,
    };
  },
  filters: {
    showCount(count) {
      return shortCount(count);
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getMvDetail();
    this.getMvUrl(1080);
    this.getCount();
    this.getComment();
    this.getVideoRelative();
  },
  methods: {
    clickArtistDetail(id) {
      this.playArtistDetail(id);
    },
    getVideoRelative() {
      this.axios({
        /* 相关视频接口地址 */
        url: "/related/allvideo?id=" + this.id,
      })
        .then((res) => {
          this.videoRelative = res.data.data;
          // console.log(this.videoRelative);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange() {
      // console.log(this.currentPage);
      // console.log(`当前页: ${val}`);
      this.getComment();
      // 点击分页后，滚动到评论的头部，141为页面头部组件的高度
      document.documentElement.scrollTo({
        top: this.$refs.comment.$el.offsetTop + 141,
        behavior: "smooth",
      });
    },
    getComment() {
      this.axios({
        /* 歌单评论接口地址 */
        url:
          "/comment/mv?id=" +
          this.id +
          "&offset=" +
          (this.currentPage - 1) * 20,
      })
        .then((res) => {
          this.commentData = res.data;
          // console.log(this.commentData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCount() {
      this.axios({
        /* mv点赞数接口地址 */
        url: "/mv/detail/info?mvid=" + this.id,
      })
        .then((res) => {
          this.likedCount = res.data.likedCount;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMvUrl(clickR) {
      this.axios({
        /* mv播放地址接口地址 */
        url: "/mv/url?id=" + this.id + "&r=" + clickR,
      })
        .then((res) => {
          this.mvUrl = res.data.data.url;
          this.r = res.data.data.r;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMvDetail() {
      this.axios({
        // mv详情接口地址
        url: "/mv/detail?mvid=" + this.id,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.code = 200;
            this.mvDetail = res.data.data;
            this.brs = res.data.data.brs;
            // console.log(this.mvDetail);
          }
          if (res.data.code == 404 || res.data.code == 400) {
            this.code = 404;
          }
        })
        .catch((err) => {
          console.log(err);
          this.code = 404;
        });
    },
  },
};
</script>

<style>
.mod-my-mv {
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.my-mv-main {
  float: left;
  width: 850px;
}
.my-mv-video {
  width: 100%;
  height: 100%;
}
.my-mv-hd,
.my-mv-box {
  position: relative;
  margin-bottom: 30px;
}
.my-mv-title,
.my-mv-artist {
  margin: 0;
  width: 100%;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-mv-artist {
  padding-left: 20px;
  padding-top: 10px;
}
.my-mv-artist a:hover {
  color: var(--color-theme);
}
.my-mv-toolbar {
  margin: 10px 0;
}
/* my-mv-relative */
.my-mv-relative {
  float: right;
  margin-top: 90px;
  width: 300px;
  overflow: hidden;
}
.my-mv-relative-box {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.my-mv-relative-hd {
  margin-bottom: 10px;
  font-weight: 400;
  height: 36px;
  line-height: 36px;
}
.mv-publish,
.mv-playCount {
  padding-left: 10px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #999;
}
.mv-desc {
  margin: 10px 0;
  padding: 10px;
}
.mv-desc pre {
  width: 100%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 20px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  /* *word-wrap: break-word; */
  /* *white-space: normal; */
}
.comment-el-pagination {
  position: relative;
  text-align: center;
  margin: 20px auto;
}
</style>